import React from 'react';
import { List, Tag, Badge } from 'antd';
import { useNavigate } from 'react-router-dom';
import styles from '../styles/components.less';

const MessageList: React.FC = () => {
  const navigate = useNavigate();

  const data = [
    {
      id: '1',
      title: '您有一个预验收申请待处理',
      type: '验收通知',
      time: '2024-03-15',
      status: 'unread'
    },
    // ... 其他数据
  ];

  return (
    <List
      className={styles.messageList}
      dataSource={data}
      renderItem={(item) => (
        <List.Item 
          onClick={() => navigate('/message')}
          style={{ cursor: 'pointer' }}
        >
          <List.Item.Meta
            title={
              <div>
                {item.status === 'unread' && <Badge status="processing" />}
                <span>{item.title}</span>
              </div>
            }
            description={
              <div className={styles.itemFooter}>
                <Tag color="blue">{item.type}</Tag>
                <span>{item.time}</span>
              </div>
            }
          />
        </List.Item>
      )}
    />
  );
};

export default MessageList; 